<template>
	<div class="contains">
		 <div class="login-header">
			  <image src="../../assets/images/register.png" mode=""></image>
			  <div class="logo"></div>
		 </div>
		 <div class="login-form">
			  <div class="login-form-grop">
				   <div class="login-form-icon">
					    <image src="../../assets/images/icon-phone.png" mode=""></image>
				   </div>
				   <div class="login-form-input">
					    <input type="text" value="" placeholder="请输入手机号"/>
				   </div>
			  </div>
			  <div class="login-form-grop">
				   <div class="login-form-icon">
					   <image src="../../assets/images/icon-code.png" mode=""></image>
				   </div>
				   <div class="login-form-input">
						<input type="text" value="" placeholder="请输入密码" />
				   </div>
			  </div>
			  <div class="login-form-grop">
				   <div class="login-form-icon">
					   <image src="../../assets/images/icon-yzm.png" mode=""></image>
				   </div>
				   <div class="login-form-input">
						<input type="text" value="" placeholder="请输入验证码" />
				   </div>
			  </div>
			  <div class="login-form-grop" style="border-bottom: none; padding-top: 10px;">
				   <button type="default">登录</button>
				   <p>忘记密码 | 注册账号</p>
			  </div>	  
		 </div>
	     <div class="third-passport">
			  <div class="third-item">
				   <image src="../../assets/images/QQ.png" mode=""></image>
			  </div>
			  <div class="third-item">
				   <image src="../../assets/images/wechat.png" mode=""></image>
			  </div>
			  <div class="third-item">
				  <image src="../../assets/images/weibo.png" mode=""></image>
			  </div>
		 </div>
	</div>
</template>

<script>
</script>

<style>
	.login-header { position: relative; width: 100%;}
	.login-header image { width: 100%;}
	.logo { width: 60px; height: 60px; background: red; border-radius: 30px; position: absolute; top: 20%; left: 50%; margin-left: -30px;}
	.login-form { width: 85%; padding-top: 20px; margin: 0 auto;}
	.login-form-grop { position: relative; width: 100%; height: 50px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
	.login-form-input { width: 100%; height: 50px;}
	.login-form-input input { padding-left: 10%; width: 90%; height: 50px; line-height: 50px; }
	.login-form-icon { width: 23px; height: 30px;  position: absolute; top: 10px; left: 5px;}
	.login-form-icon image { width: 100%; height: 100%;}
	.login-form-grop button { background: #214bfa; color: aliceblue;}
	.login-form-grop p { text-align: center; color: #214bfa; margin-top: 10px;}
	.third-passport { margin-top: 50px; text-align: center; }
	.third-passport .third-item { width: 50px; height: 46px; margin: 0 30px; display: inline-block;}
	.third-passport .third-item image { width: 100%; height: 100%;}
</style>